<template>
  <div class="login-container">
    <div class="login-box" data-aos="fade-up" data-aos-duration="800">
      <div class="login-header" data-aos="fade-down" data-aos-delay="200">
        <img
          src="https://picsum.photos/seed/logo/200"
          alt="Logo"
          class="logo"
        />
        <h2>欢迎回来</h2>
        <p class="subtitle">请登录您的账号</p>
      </div>

      <van-form @submit="onSubmit" class="login-form">
        <div class="form-item" data-aos="fade-right" data-aos-delay="400">
          <van-field
            v-model="username"
            name="username"
            placeholder="请输入用户名"
            :rules="[{ required: true, message: '请输入用户名' }]"
          >
            <template #left-icon>
              <i class="fas fa-user"></i>
            </template>
          </van-field>
        </div>

        <div class="form-item" data-aos="fade-right" data-aos-delay="600">
          <van-field
            v-model="password"
            type="password"
            name="password"
            placeholder="请输入密码"
            :rules="[{ required: true, message: '请输入密码' }]"
          >
            <template #left-icon>
              <i class="fas fa-lock"></i>
            </template>
          </van-field>
        </div>

        <div class="submit-btn" data-aos="zoom-in" data-aos-delay="800">
          <van-button
            round
            block
            type="primary"
            native-type="submit"
            :loading="loading"
          >
            {{ loading ? '登录中...' : '登 录' }}
          </van-button>
        </div>
      </van-form>

      <div class="login-footer" data-aos="fade-up" data-aos-delay="1000">
        <p>测试账号: admin</p>
        <p>测试密码: 123456</p>
      </div>
    </div>

    <div class="background-shapes">
      <div class="shape shape-1" data-aos="fade-right" data-aos-duration="1500"></div>
      <div class="shape shape-2" data-aos="fade-left" data-aos-duration="1500"></div>
      <div class="shape shape-3" data-aos="fade-up" data-aos-duration="1500"></div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { showToast } from 'vant'
import { useUserStore } from '@/stores/user'
import AOS from 'aos'
import 'aos/dist/aos.css'

onMounted(() => {
  AOS.init({
    once: true,
    duration: 1000,
  })
})

const router = useRouter()
const userStore = useUserStore()

const username = ref('')
const password = ref('')
const loading = ref(false)

const onSubmit = async () => {
  try {
    loading.value = true
    await userStore.login(username.value, password.value)
    showToast({ message: '登录成功', type: 'success' })
    router.push('/')
  } catch (error) {
    showToast({ message: error.message || '登录失败', type: 'fail' })
  } finally {
    loading.value = false
  }
}
</script>

<style lang="less" scoped>
.login-container {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  position: relative;
  overflow: hidden;

  .login-box {
    width: 90%;
    max-width: 400px;
    padding: 30px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
    position: relative;
    z-index: 1;

    .login-header {
      text-align: center;
      margin-bottom: 30px;

      .logo {
        width: 80px;
        height: 80px;
        margin-bottom: 16px;
        border-radius: 50%;
        object-fit: cover;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      }

      h2 {
        font-size: 24px;
        color: #333;
        margin-bottom: 8px;
      }

      .subtitle {
        color: #666;
        font-size: 14px;
      }
    }

    .login-form {
      .form-item {
        margin-bottom: 20px;

        :deep(.van-field) {
          background: rgba(255, 255, 255, 0.8);
          border-radius: 8px;
          padding: 12px 16px;

          &__left-icon {
            margin-right: 10px;
            color: #666;
          }
        }
      }

      .submit-btn {
        margin-top: 30px;

        .van-button {
          height: 44px;
          font-size: 16px;
          background: linear-gradient(45deg, #667eea, #764ba2);
          border: none;

          &:active {
            transform: scale(0.98);
          }
        }
      }
    }

    .login-footer {
      margin-top: 20px;
      text-align: center;
      color: #666;
      font-size: 14px;

      p {
        margin: 5px 0;
      }
    }
  }

  .background-shapes {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;

    .shape {
      position: absolute;
      background: rgba(255, 255, 255, 0.1);
      border-radius: 50%;

      &-1 {
        width: 300px;
        height: 300px;
        top: -150px;
        left: -150px;
      }

      &-2 {
        width: 200px;
        height: 200px;
        bottom: -100px;
        right: -100px;
      }

      &-3 {
        width: 150px;
        height: 150px;
        bottom: 50%;
        left: 50%;
        transform: translate(-50%, 50%);
      }
    }
  }
}

// 添加动画
@keyframes float {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-20px); }
  100% { transform: translateY(0px); }
}

.shape {
  animation: float 6s ease-in-out infinite;
  &-2 { animation-delay: -2s; }
  &-3 { animation-delay: -4s; }
}
</style>
